Dropdown
A jQuery plugin for custom select elements.
Demo
Use
Main
dropdown.js
dropdown.css
Dependencies
core.js
touch.js
Basic
To customize a select element, simply apply the plugin to the target element:
$("select").dropdown();
<select>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
Events
React to changes to the element's value by listening for the standard change
event:
$("select").on("change", function() {
var value = $(this).val();
});
Updated the element's value externally by triggering the standard change
event:
$("select").val(1).trigger("change");
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-dropdown-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
cover |
boolean |
false |
Cover handle with option set |
customClass |
string |
'' |
Class applied to instance |
label |
string |
'' |
Label displayed before selection |
external |
boolean |
false |
Open options as links in new window |
links |
boolean |
false |
Open options as links in same window |
mobile |
boolean |
false |
Force desktop interaction on mobile |
trim |
int |
0 |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
close
Closes target instance.
$(".target").dropdown("close");
defaults
Extends plugin default settings; effects instances created hereafter.
$.dropdown("defaults", { ... });
Parameters
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
New plugin defaults |
destroy
Removes plugin instance.
$(".target").dropdown("destroy");
disable
Disables target instance or option.
$(".target").dropdown("disable", "1");
Parameters
Name | Type | Default | Description |
---|---|---|---|
option |
string |
null |
Target option value |
enable
Enables target instance or option.
$(".target").dropdown("enable", "1");
Parameters
Name | Type | Default | Description |
---|---|---|---|
option |
string |
null |
Target option value |
open
Opens target instance.
$(".target").dropdown("open");
update
Updates instance.
$(".target").dropdown("update");
CSS
Class | Type | Description |
---|---|---|
.fs-dropdown-element |
element |
Target element |
.fs-dropdown |
element |
Base widget class |
.fs-dropdown.fs-dropdown-multiple |
modifer |
Indicates multi-selected element |
.fs-dropdown.fs-dropdown-cover |
modifer |
Indicates cover positioning |
.fs-dropdown.fs-dropdown-bottom |
modifer |
Indicates bottom positioning |
.fs-dropdown.fs-dropdown-disabled |
modifer |
Indicates disabled state |
.fs-dropdown.fs-dropdown-open |
modifer |
Indicates open state |
.fs-dropdown.fs-dropdown-focus |
modifer |
Indicates focus state |
.fs-dropdown-selected |
element |
Handle item |
.fs-dropdown-options |
element |
Options container |
.fs-dropdown-group |
element |
Option group label |
.fs-dropdown-item |
element |
Option item |
.fs-dropdown-item.fs-dropdown-item_placeholder |
modifier |
Indicates placeholder item |
.fs-dropdown-item.fs-dropdown-item_selected |
modifier |
Indicates selected item |
.fs-dropdown-item.fs-dropdown-item_disabled |
modifier |
Indicates disabled item |